<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;
				width: 200px;
				height: 300px;
			/*	font: italic small-caps 600 12pts/18pts 宋体; */
			    font-style: initial;   /*斜体*/
			  /*  font-size: 14px; */ /* 像素*/
			    font-family: cursive ;
			    font-size-adjust: none; /* none：允许安装自己的尺寸   数字： 统一制定尺寸*/
			   /*  font-stretch: narrower;*/
			    font-weight: lighter;
			    text-decoration: line-through;
			    text-decoration: underline;
			    text-transform: lowercase;
			} 
			
			a{
				text-decoration: none;
				color: gray;
			}
			a:hover{
				color: gold;
			}
			p{
				font-size: 20px;
				text-shadow: 5px -10px 8px gold;
			}
			
			#mydiv1{
				line-height: 300px;
				text-align: center;  /*文本居中*/
				margin: 0 auto;
				
			}
			
			.textCls{
				
			}
		</style>
	</head>
	<body>
		 <!--字体：
		 	 font 
		 	 
		 	 font-style：  italic  、oblique  、  normal 字体风格
		 	 font-size ：  small  px    %
		 	 font-family:  宋体  楷体，微软雅黑 ，cursive ，
		 	 font-weight ： 700粗体  border  lighter 细的   nomal 正常的
		 	 text-shadow : 设置文字阴影    2px  2px  8px  yellow  ,表示 水平距离，垂直距离，模糊距离 ，颜色 
		 	 font-variant  
		 	 text-transform :  对文字中英文字符 可以转化 大写，小写 ，首字母大写 
		 	 
		 -->
		 <div>
		 	请您用下面的按钮选择这段文字的text-dECoration属性的值。
		 	看一看会发生什么，
		 	然后您就会明白这个属性的意义。希望您喜欢这本电子书。谢谢。

		 	
		 </div>
		 
		 <p>这是UI设计模型，我们都是未来的设计师</p>
		 
		 <a href="http://www.baidu.com">百度</a>
		 
		 <div id="mydiv1">   <!--  自动换行    由于 div的高度只有300 ，一行就是300，所以换行看不见 -->
		 	  div内容居中显示 div内容居中显示 div内容居中显示 div内容居中显示 div内容居中显示
		 	
		 </div>
		 
		 
		
		 
	</body>
</html>
